<template>
    <!--
使用说明：
1）、引入category-cascader.vue
2）、语法：<category-cascader :CascaderPathVals.sync="CascaderPathVals"></category-cascader>
    解释：
      CascaderPathVals：指定的值是cascader初始化需要显示的值，应该和父组件的CascaderPathVals绑定;
          由于有sync修饰符，所以cascader路径变化以后自动会修改父的CascaderPathVals，这是结合子组件this.$emit("update:CascaderPathVals",v);做的
      -->
    <div>
        <el-cascader
            ref="dept_cascader"
            filterable
            :clearable="clearable"
            :show-all-levels="false"
            placeholder="试试搜索：部门"
            v-model="deptValue"
            :options="datas"
            :props="defaultProps"
            :style="styles"
        ></el-cascader>
    </div>
</template>

<script>

export default {
    components: {},
    //接受父组件传来的值
    props: {
        cascaderDeptVal: {
            type: Array,
            default() {
                return [];
            }
        },
        styles: {
            type: String,
            default() {
                return 'width: 100%'
            }
        },
        clearable:{
            type: Boolean,
            default: true
        },
        checkStrictly: {
            type: Boolean,
            default() {
                return false;
            }
        },
        multiple: {
            type: Boolean,
            default() {
                return false;
            }
        },
        disabledId: {
            type: [String,Number],
            default() {
                return null
            }
        }
    },
    data() {
        //这里存放数据
        return {
            defaultProps: {
                checkStrictly: this.checkStrictly,
                value: "id",
                label: "name",
                children: "children",
                multiple: this.multiple
            },

            datas: [],
            deptValue: [],

            dataVal: null,
        };
    },
    watch: {
        deptValue(val) {
            this.dataVal = null

            // 更新父组件的值
            if(val.length > 0) {
                this.getListWithTree();
                this.$emit("update:cascaderDeptVal", val);
            } else {
                this.getListWithTree();
            }
            // 调用父组件@clear，清空，赋值为NULL
            if(val.length == 0) {
                this.$emit("clear");
            }

            // 获取选择节点的值，供父组件调用获取值
            setTimeout(() => {
                const nodes = this.$refs.dept_cascader.getCheckedNodes()

                if(nodes[0]) {
                    this.dataVal = nodes[0].data
                }
            }, 500);
        },

        // 编辑时填充父组件传入的值
        cascaderDeptVal(v) {
            this.deptValue = this.cascaderDeptVal;
        },
    },

    mounted() {
    	this.$nextTick(function () {
    	})
    },

    created() {
        this.getListWithTree();
    },

    methods: {
        async getListWithTree() {
            const res = await this.$http({
                url: '/hr/dept/listWithTree',
                method: 'GET',
                params: {disabledId: this.disabledId?this.disabledId:null}
            })
            if (this.ResultMessage(res, false)) {
                this.datas = res.data
            }
        },

        // 重置按钮调用清空
        clearVal() {
            this.deptValue = []
        }
    },

};
</script>
<style scoped></style>
